<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-left">
        <div class="text-center my-30px">
          <p class="text-16px font-500 mb-5px">{{ t('login.openApp') }}</p>
          <span class="">{{ t('login.openAppDesc') }}</span>
        </div>
        <Qrcode
          :link="qrcode.link"
          :centerText="qrcode.centerText"
          :canvasSize="qrcode.canvasSize"
          :qrSize="qrcode.qrSize"
          :centerType="qrcode.centerType"
          :centerIcon="qrcode.centerIcon"
          :iconSize="qrcode.iconSize"
          :showBackground="qrcode.showBackground"
        />
        <div class="text-center mt-30px">
          <p class="text-12px font-500 mb-5px">{{ t('login.otherScan') }}</p>
        </div>
      </div>
      <!-- <el-form :model="form" label-width="120px" class="login-form">
        <el-form-item label="用户名">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form> -->
      <div class="login-form">
        <div class="login-tabs">
          <el-tabs v-model="activeTab">
            <el-tab-pane
              v-for="item in tabsList"
              :key="item.value"
              :label="item.label"
              :name="item.value"
            >
              <PasswordLogin :activeTab="activeTab" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { getCurrentInstance, onMounted, reactive, ref, defineAsyncComponent } from 'vue'
import { useRouter } from 'vue-router'
import { getMenuList, login } from '@/api/login'
import { useUserStore } from '@/stores/user'
import Qrcode from '@/components/Qrcode/index.vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const router = useRouter()
const { proxy } = getCurrentInstance() as any

// 使用defineAsyncComponent正确导入异步组件
// const CodeLogin = defineAsyncComponent(() => import('@/views/login/components/CodeLogin.vue'))
const PasswordLogin = defineAsyncComponent(
  () => import('@/views/login/components/PasswordLogin.vue'),
)

const tabsList = [
  {
    label: t('login.codeLogin'),
    value: 'code',
  },
  {
    label: t('login.passwordLogin'),
    value: 'password',
  },
]
const form = ref({
  username: '',
  password: '',
})
const activeTab = ref('code')
const onSubmit = () => {
  login(form.value).then((res: any) => {
    if (res.code === 200) {
      const { token, userInfo } = res.data
      useUserStore().setToken(token)
      useUserStore().setUserInfo(userInfo)
      router.replace('/')
    } else {
      ElMessage.error(res.message)
    }
  })
}

const qrcode = reactive({
  link: 'https://www.baidu.com',
  centerText: t('login.scanCode'),
  qrSize: 110,
  canvasSize: 120,
  centerType: 'icon', // 'text' | 'icon' | 'both'
  centerIcon: 'https://element-plus.org/images/element-plus-logo.svg', // 示例图标
  iconSize: 24,
  showBackground: true,
})

onMounted(() => {})
</script>

<style scoped lang="scss">
.login-container {
  font-size: 14px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('@/assets/imgs/login-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  .login-box {
    position: relative;
    display: flex;
    width: 730px;
    height: 400px;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    .login-left {
      box-sizing: border-box;
      width: 330px;
      height: 100%;
      background-color: #fff;
      border-right: 1px solid #e5e5e5;
      padding: 20px;
    }
    .login-form {
      box-sizing: border-box;
      flex: 1;
      height: 100%;
      background-color: #fff;
      padding: 20px 40px;
      padding: 20px;
    }
  }
}
:deep(.el-tabs__nav-wrap:after) {
  display: none;
}
</style>
